<template>
<div class="bh-table">
	<div class="bh-table__header-wrapper">
		<table class="bh-table__header">
			<colgroup>
				<col v-for='item2 in columns' :width='item2.width' :key='item2.prop' />
			</colgroup>
			<thead>
				<tr>
					<th class="bh-table__cell" v-for='item2 in columns' :key='item2.prop'>
						<div class="cell">
							<div>{{item2.label}}</div>
						</div>
					</th>
				</tr>
			</thead>
		</table>
	</div>
	<div class="bh-table__body-wrapper">
		<table class="bh-table__body">
			<colgroup>
				<col v-for='item2 in columns' :width='item2.width' :key='item2.prop' />
			</colgroup>
			<tbody>
				<tr class="el-table__row" v-for='(item1) in listData' :key='item1.prop'>
					<td class="bh-table__cell" v-for='item2 in columns' :key='item2.prop'>
						<div class="cell">
							<div>{{item1[item2.prop]}}</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<!-- 为了引入子级 -->
	<slot></slot>
</div>
</template>

<script>
export default {
	name: 'bh-table',
	provide() {
		return {
			'table': this
		};
    },
	props: {
		data: {
			type: Array,
			default: function() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [],
			columnsCount: 0,
		}
	},
	methods: {
		close() {
			this.visible = false;
			this.$emit('close');
		},
	},
	computed: {
		listData() {
			let data = this.data;
			return data;
		},
	},
}
</script>
